import { Avatar, Menu, Space, Typography, Image, Dropdown } from "antd";
import '../component_css/style.css';
import { useNavigate, useLocation } from "react-router-dom";
import { UserOutlined, LogoutOutlined } from '@ant-design/icons';
import logo from '../assets/logo.png';

const { Text } = Typography;

// 假设你的SVG图标位于assets/icons/目录下
import mainPageIcon from '../assets/icon/icon_mainpage.svg';
import wordIcon from '../assets/icon/icon_word.svg';
import speechIcon from '../assets/icon/icon_dialogue.svg';
import readingIcon from '../assets/icon/icon_reading.svg';
import progressIcon from '../assets/icon/icon_progress.svg';

export default function MyMenu() {
  const navigate = useNavigate(); // 获取触发路由跳转的方法
  const location = useLocation(); // 获取当前路径

  // 处理退出登录逻辑
  const handleLogout = () => {
    window.location.href = 'http://localhost:5173'; // 退出登录后的重定向
  };

  // 根据当前路径设置选中的菜单项
  const selectedKeys = [location.pathname];

  // 菜单事件
  const handleMenu = ({ key }) => {
    if (key === 'logout') {
      handleLogout();
    } else if (key !== '/userprofile') {  // 不处理 /userprofile 的点击
      console.log(key);
      navigate(key); // 触发路由跳转
    }
  };

  const items = [
    {
      key: "/mainpage",
      label: (
        <span className="custom-menu-item">
          <img src={mainPageIcon} alt="主页" style={{ verticalAlign: 'middle', height: '2.5em', marginRight: '8px', marginTop: -5 }} />
          Home
        </span>
      )
    },
    {
      key: "/word",
      label: (
        <span className="custom-menu-item">
          <img src={wordIcon} alt="单词学习" style={{ verticalAlign: 'middle', height: '1.7em', marginRight: '8px', marginTop: -4 }} />
          Word
        </span>
      ),
    },
    {
      key: "/speech",
      label: (
        <span className="custom-menu-item">
          <img src={speechIcon} alt="对话练习" style={{ verticalAlign: 'middle', height: '1.6em', marginRight: '8px', marginTop: -4 }} />
          Colloquial
        </span>
      ),
    },
    {
      key: "/reading",
      label: (
        <span className="custom-menu-item">
          <img src={readingIcon} alt="阅读翻译" style={{ verticalAlign: 'middle', height: '1.7em', marginRight: '8px', marginTop: -4 }} />
          Read
        </span>
      ),
    },
    {
      key: "/progress",
      label: (
        <span className="custom-menu-item">
          <img src={progressIcon} alt="进度记录" style={{ verticalAlign: 'middle', height: '1.6em', marginRight: '8px', marginTop: -4 }} />
          Progress
        </span>
      ),
    },
    // 添加下拉菜单项
    {
      key: "/userprofile",
      label: (
        <Dropdown
          overlay={
            <Menu
              style={{
                backgroundColor: '#f0f2f5',  // 设置下拉菜单的背景色
              }}
            >
              <Menu.Item key="profile" onClick={() => navigate('/userprofile')}>
                <UserOutlined /> 个人主页
              </Menu.Item>
              <Menu.Item key="logout" onClick={handleLogout}>
                <LogoutOutlined /> 退出登录
              </Menu.Item>
            </Menu>
          }
          trigger={['hover']}  // 更改为 hover 触发
        >
          <Space size={16}>
            <Avatar
              style={{
                backgroundColor: '#87d068',
              }}
              icon={<UserOutlined />}
            />
          </Space>
        </Dropdown>
      ),
    },
  ];

  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 10 }}>
      {/* Logo和软件名 */}
      <div style={{ marginRight: '20px', display: 'flex', alignItems: 'center' }}>
        <Image
          src={logo}
          alt="logo"
          preview={false}
          width={36}
          height={36}
          style={{ borderRadius: '50%' }}
        />
        <Text strong style={{ marginLeft: '8px', fontSize: '18px', color: '#23153C', marginBottom: 5 }}>LinguaLeap</Text>
      </div>

      <Menu
        theme="dark"
        selectedKeys={selectedKeys}
        mode="horizontal"
        items={items}
        onClick={handleMenu}
        style={{
          height: '50px', // 设置固定高度
          width: '1100px',
          justifyContent: 'flex-start', // 将菜单项左对齐
          background: 'transparent', // 设置背景色为透明
        }}
      />
    </div>
  );
}